<template>
  <div class="kiosk-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-item active">首页</div>
      <div class="nav-item">购物车</div>
      <div class="nav-item">我的订单</div>
    </div>

    <!-- 搜索和排序区域 -->
    <div class="search-sort-section">
      <div class="search-box">
        <el-input
          placeholder="输入搜索的商品名称"
          prefix-icon="el-icon-search"
          v-model="searchKeyword"
        ></el-input>
      </div>
      <div class="sort-options">
        <span>排序：</span>
        <el-radio-group v-model="sortBy" size="small">
          <el-radio-button label="名称"></el-radio-button>
          <el-radio-button label="价格"></el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 商品列表区域 -->
    <div class="products-section">
      <h2 class="section-title">商品列表</h2>
      
      <!-- 滚动商品区域 -->
      <div class="scroll-container" ref="scrollContainer">
        <div class="products-scroll" :style="scrollStyle">
          <div 
            v-for="(product, index) in deltaProducts" 
            :key="index" 
            class="product-card"
          >
            <div class="product-image">
              <img :src="product.image" :alt="product.name">
              <div class="promo-tag" v-if="product.promo">{{ product.promo }}</div>
            </div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-brand">{{ product.brand }}</div>
              <div class="product-price">
                <span class="price">￥{{ product.price }}</span>
                <span class="original-price" v-if="product.originalPrice">￥{{ product.originalPrice }}</span>
              </div>
              <div class="stock-info">
                <span class="stock">剩余：{{ product.stock }}</span>
                <el-button 
                  type="danger" 
                  size="mini" 
                  class="buy-btn"
                  :disabled="product.stock === 0"
                >
                  {{ product.stock > 0 ? '抢购' : '缺货' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Kiosk',
  data() {
    return {
      searchKeyword: '',
      sortBy: '名称',
      scrollPosition: 0,
      scrollInterval: null,
      deltaProducts: [
		{
		  name: '海洋之泪',
		  brand: '三角洲收藏',
		  price: '9999.99',
		  stock: 2,
		  image: 'https://t14.baidu.com/it/u=2908011996,395093040&fm=224&app=112&f=JPEG?w=500&h=500'
		},
        {
          name: '玄武',
          brand: '三角洲官方',
          price: '299.0',
          originalPrice: '399.0',
          promo: '限时7.5折',
          stock: 15,
          image: 'https://img1.baidu.com/it/u=1215976799,3483762601&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
        },
        {
          name: '万金泪冠',
          brand: '三角洲装备',
          price: '149.9',
          originalPrice: '199.0',
          promo: '新品上市',
          stock: 23,
          image: 'https://img0.baidu.com/it/u=1094655126,2795086293&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1735'
        },
        {
          name: '量子储存',
          brand: '三角洲装备',
          price: '259.0',
          promo: '爆款3件5折',
          stock: 88,
          image: 'https://t13.baidu.com/it/u=3299997282,2894280845&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
          name: '大红藏馆',
          brand: '三角洲装备',
          price: '69.99',
          stock: 56,
          image: 'https://t13.baidu.com/it/u=2263341071,1125064169&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
          name: '作战坦克模型',
          brand: '三角洲装备',
          price: '1349.0',
          originalPrice: '449.0',
          promo: '限时特惠',
          stock: 5,
          image: 'https://img1.baidu.com/it/u=3913623251,1113844696&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1780'
        },
        {
          name: '非洲之心',
          brand: '三角洲装备',
          price: '8888.88',
          promo: '6月13日-15日',
          stock: 18,
          image: 'https://t15.baidu.com/it/u=457211092,4122446196&fm=224&app=112&f=JPEG?w=500&h=500'
        },
        {
          name: '刘涛神力',
          brand: '三角洲收藏',
          price: '159.0',
          originalPrice: '199.0',
          promo: '收藏款8折',
          stock: 12,
          image: 'https://t15.baidu.com/it/u=335006330,914372633&fm=224&app=112&f=JPEG?w=500&h=500'
        },
		{
		  name: 'A达子弹',
		  brand: 'AWM生产基地',
		  price: '2.0',
		  originalPrice: '2.0',
		  promo: '收藏款8折',
		  stock: 1200,
		  image: 'https://t15.baidu.com/it/u=335006330,914372633&fm=224&app=112&f=JPEG?w=500&h=500'
		},
        
      ]
    };
  },
  computed: {
    scrollStyle() {
      return {
        transform: `translateX(${this.scrollPosition}px)`
      };
    }
  },
  mounted() {
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      this.scrollInterval = setInterval(() => {
        const containerWidth = this.$refs.scrollContainer.offsetWidth;
        const scrollWidth = this.deltaProducts.length * 280; // 每个商品卡片宽度
        
        this.scrollPosition -= 1;
        
        // 如果滚动到尽头，重置位置
        if (Math.abs(this.scrollPosition) >= scrollWidth - containerWidth) {
          this.scrollPosition = 0;
        }
      }, 30);
    },
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.kiosk-container {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  overflow: hidden;

  .top-nav {
    display: flex;
    background-color: #11657f; /* 大红主题色 */
    padding: 0 20px;
    
    .nav-item {
      padding: 15px 25px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      position: relative;
      
      &.active {
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background-color: #fff;
        }
      }
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }

  .search-sort-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .search-box {
      width: 300px;
    }
    
    .sort-options {
      display: flex;
      align-items: center;
      
      span {
        margin-right: 10px;
        color: #666;
      }
    }
  }

  .products-section {
    flex: 1;
    padding: 20px;
    overflow: hidden;
    
    .section-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 15px;
      padding-left: 10px;
      border-left: 4px solid #11657f;
    }
    
    .scroll-container {
      width: 100%;
      overflow: hidden;
      position: relative;
      
      .products-scroll {
        display: flex;
        transition: transform 0.5s ease;
        
        .product-card {
          flex: 0 0 260px;
          margin-right: 20px;
          background-color: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          
          .product-image {
            position: relative;
            height: 180px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s;
            }
            
            .promo-tag {
              position: absolute;
              top: 10px;
              right: 10px;
              background-color: #11657f;
              color: #fff;
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
            }
          }
          
          .product-info {
            padding: 15px;
            
            .product-name {
              font-size: 16px;
              font-weight: bold;
              color: #333;
              margin-bottom: 5px;
            }
            
            .product-brand {
              font-size: 14px;
              color: #666;
              margin-bottom: 10px;
            }
            
            .product-price {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              
              .price {
                font-size: 18px;
                font-weight: bold;
                color: #c20c0c;
                margin-right: 10px;
              }
              
              .original-price {
                font-size: 14px;
                color: #999;
                text-decoration: line-through;
              }
            }
            
            .stock-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .stock {
                font-size: 14px;
                color: #666;
              }
              
              .buy-btn {
                padding: 7px 15px;
              }
            }
          }
          
          &:hover {
            .product-image img {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .kiosk-container {
    .search-sort-section {
      flex-direction: column;
      align-items: flex-start;
      
      .search-box {
        width: 100%;
        margin-bottom: 10px;
      }
    }
    
    .products-section {
      .scroll-container {
        .products-scroll {
          .product-card {
            flex: 0 0 220px;
          }
        }
      }
    }
  }
}
</style>